<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            /* 这个是让行内级盒子居中的 行内非替换元素span/a 行内替换元素img input inline-block */
            /* 没有一个元素默认是 inline-block 的，只是提供给我们使用的一个属性 */
            text-align: center;
        }
        .box{
            /* display: inline-block; */
            height: 100px;
            width: 100px; 
            background-color: aqua;
            /* 当前块级元素是独占一行的 */
            /* 其实margin-right有默认值的，然后这里已经明确了width了，剩下的全交给margin-right */
            /* 那如果我们不想全部分给margin-right怎么办？我们可以设置margin左右为auto */
            /* margin:0 auto是没有办法的办法，是让浏览器自己处理成居中的效果，最好用flex */
            /* 这样在占据整行的情况下，就会对left和right平均分配，这样就达到居中效果 */
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>